/* Here is your custom css styles. */

.xinde {
    width: 100%;
    /* 设置宽度为100% */
    height: 300px;
    display: flex;
    /* 启用Flexbox布局 */
}

.xinde6 {
    width: 100%;
    /* 设置宽度为100% */
    height: 300px;
    display: flex;
    /* 启用Flexbox布局 */
}

.xinde2 {
    width: 100%;
    /* 设置宽度为100% xinde2 是非浮卡片手机不够而做的*/
    height: 300px;
    display: flex;
    /* 启用Flexbox布局 */
}

.xinde6 {
    width: 100%;
    /* 设置宽度为100% xinde2 是非浮卡片手机不够而做的*/
    height: 300px;
    display: flex;
    /* 启用Flexbox布局 */
}

.xinde .left1,
.xinde .right1 {
    width: 50%;
    /* 设置每个子元素的宽度为50% */
    box-sizing: border-box;
    /* 防止padding和border影响最终尺寸 */
}

.xinde6 .left1,
.xinde6 .right1 {
    width: 50%;
    /* 设置每个子元素的宽度为50% */
    box-sizing: border-box;
    /* 防止padding和border影响最终尺寸 */
}



.xinde2 .left1,
.xinde2 .right1 {
    width: 50%;
    /* 设置每个子元素的宽度为50% */
    box-sizing: border-box;
    /* 防止padding和border影响最终尺寸 */
}

.right0 h2 {
    /* 您可以在此处定义h2元素的样式 */
    font-weight: 400;
    margin-left: 3px;


}


/* .my-image1 {
    border-radius: 20px;
    max-width: 70%;
    max-height: 70%;
} */



.my-image1 {


    margin-left: 50px;
    /* 
   * 设置元素的圆角边框大小为20px
   * 设置元素的最大宽度为70%
   * 设置元素的最大高度为70%
   * 设置元素的边框为1px的solid线，颜色为#fdfdfd
   */
    border-radius: 20px;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #fdfdfd;
}




.left1 {
    position: relative;
    width: 100%;
    height: 100%;

}

.my-image1 {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    border: 2px solid rgb(236, 235, 235);

}

/* 居中显示 */
.right1 {
    font-size: 20px;
    font-weight: 300;
    display: flex;
    /* 将元素显示为弹性布局容器 */

    align-items: center;
    /* 在交叉轴上居中子元素 */
    margin-right: 10px;


}

.right2 {
    margin-bottom: 20px;
    /* 设置元素底部的外边距为20像素 */
    display: flex;
    /* 将元素显示为弹性布局 */
    justify-content: flex-end;
    /* 将主轴上的内容在弹性容器中放置在末尾 */
    overflow: hidden;
    /* 设置溢出内容被隐藏 */
}



@media only screen and (max-width: 900px) {


    .xinde {
        height: 500px;
        width: 100%;
        /* 设置宽度为100% */
        margin-bottom: 20px;



        flex-direction: column;
        /* 设置Flex容器的主轴方向为垂直方向 */
    }

    .xinde2 {
        height: 500px;
        width: 100%;
        /* 设置宽度为100% xinde2,非浮起来的卡片的手机高度不高而做的*/
        margin-bottom: 0px;



        flex-direction: column;
        /* 设置Flex容器的主轴方向为垂直方向 */
    }

    .xinde6 {
        height: calc(100% + 100% + 100%);
        width: 100%;
        /* 设置宽度为100% xinde2,非浮起来的卡片的手机高度不高而做的*/
        margin-bottom: 0px;



        flex-direction: column;
        /* 设置Flex容器的主轴方向为垂直方向 */
    }

    .right1 .right2 {
        width: 100%;
        /* 1，是最外面的大div。rig0 和right2，是最下面的小的div。设置每个子元素的宽度*/
        display: flex;
        flex-direction: column;
        align-items: center;


    }

    .left1 {
        width: 100%;
        /* 设置每个子元素的宽度为50% */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* margin: 5px; */
        /* margin-top: 10px;  */
        /* margin-left: 20px;
        margin-right: 20px; */

    }

    .my-image1 {
        position: absolute;
        width: 90%;
        /* 设置元素的定位方式为绝对定位 */
        top: 50%;
        /* 将元素的上边界距离其父元素上边界50%的位置 */
        left: 50%;
        /* 将元素的左边界距离其父元素左边界50%的位置 */
        transform: translate(-50%, -50%);
        /* 将元素的左上角平移至其父元素的中心位置 */

    }


}

/* pad平板 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* .left1 {

        margin-top: 10px;
    } */

    .my-image1 {
        width: 85%;
    }
}


/*.xinde .left1选择器和.xinde .right1选择器选择在.xinde类下的.left1元素和.right1元素
    设置宽度为100% */

@media only screen and (max-width: 900px) {

 

    .xinde .left1,
    .xinde .right1 {
        width: 100%;



    }

    .xinde2 .left1,
    .xinde2 .right1 {
        width: 100%;


    }


    .xinde6 .left1,
    .xinde6 .right1 {
        width: 100%;


    }

    /* 这个是为了让h标题和下面的很多小字居中用的一个辅助div */
    .juzhongyongde {
        width: 100%;

    }

    /* right0 是右边的h标题的div */
    .right0 {

        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;


    }

    .right0 h2 {
        /* 您可以在此处定义h2元素的样式 */
        margin-top: 0.5em;

        font-size: 24px;


    }

    .right1 {
        width: 100%;
        padding: 0px 0px 0px 0px;
        font-size: 20px;
        margin-right: 0px;


    }

    .right2 {
   
   

        margin-right: 1px;
        /* 右外边距为1像素 */
        margin-left: 4px;
        /* 左外边距为4像素 */

    }

    .right1 .child {
        display: flex;
        /* 设置子元素为弹性布局 */
        justify-content: center;
        /* 主轴上元素居中对齐 */
        align-items: center;
        /* 内部交叉轴上元素居中对齐 */
    }

    .card2 {
        padding: 2px 4px;

    }

    .my-image1 {

        margin-left: 0px;

    }




    /* .juzhongyongde {} */

    .cover-social-link {

        margin-bottom: 50px;
    }

    .pre-line {


        padding-right: 10px;
        /* 右内边距为2像素 */

        padding-left: 11px;
        /* 左内边距为2像素 */


    }

}


/* ---------------------------------------电脑的大屏效果-------------------------------------------- */

@media only screen and (max-width: 900px) {

    /* 电脑的大屏效果 */
    hr {
        display: none;
        /* 在媒体查询中，将`<hr>`标签的`display`属性设置为`none`，以在手机屏幕上不显示 */
    }

}





/* 彩色背景色
 .card2 {
    padding: 20px 40px;
    background-color: #046414;
    border-radius: 10px;
    color: white;
    box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07) !important;
}
.card2 .card-image img {
    border-radius: 8px 8px 0 0;
    
    object-fit: cover;
} */

.card3 {
    padding: 20px 40px;
    /* background-color: #f1f1f1;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #e4e4e4;
    */



}

.card3 .card-image img {
    border-radius: 8px 8px 0 0;

    object-fit: cover;

}


.card6 {
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07) !important;
    background-color: #fff;
}

.pre-line {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;


}

.pre-line a {
    color: green;
}

.card5 .card-image img {
    border-radius: 8px 8px 0 0;

    object-fit: cover;

}

.card9 {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07) !important;
}

.card9 .card-image img {
    border-radius: 8px 8px 0 0;
    /* 修改文章列表图片填充样式为 cover 以覆盖整个区域而不会被缩放 */
    object-fit: cover;
}


iframe::-webkit-scrollbar {
    width: 1px;
}

iframe::-webkit-scrollbar-thumb {
    background-color: #d3d3d3;
    border-radius: 1.5px;
}

@media only screen and (max-width: 900px) {

.pre-line {
  /* 手机端首页正文字体大小*/
    font-size: 19px;
      }
.right2 {
        font-size: 19px;
                 }
}